<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">

    <title>Taskflow</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500&amp;subset=cyrillic" rel="stylesheet">
    <link href="/resources/webjars/bootstrap/3.3.7-1/css/bootstrap.css" rel="stylesheet">
    <link href="/static/dashboard.css" rel="stylesheet">
</head>

<body ng-app="dag">

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Taskflow</a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar" ng-controller="SidebarCtrl">
            <ul class="nav nav-sidebar" ng-repeat="menu in menus">
                <li ng-repeat="link in menu" ng-class="activeClass(link.href)">
                    <a href="#{{link.href}}">{{link.title}}</a>
                </li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-view></div>
    </div>
</div>

<script type="text/ng-template" id="/dag-latest.html">
    <h2 class="page-header">DAG</h2>
    <table class="table table-stripped">
        <thead>
        <tr>
            <th>#</th>
            <th>version</th>
            <th>token</th>
            <th>tasks</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="dag in latest">
            <td>{{dag.id}}</td>
            <td>{{dag.version}}</td>
            <td>{{dag.token}}</td>
            <td>{{dag.tasks.length}}</td>
            <td>
                <a href="#dag/id/{{dag.id}}" class="btn btn-xs btn-default">view</a>
                <a href="#dag/update/id/{{dag.id}}" class="btn btn-xs btn-default">edit</a>
                <button class="btn btn-xs btn-primary" ng-controller="CreateDagRunCtrl" ng-click="createDagRunById(dag.id)">
                    run
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</script>
<script type="text/ng-template" id="/dag-state.html">
    <h2 class="page-header">DAG {{dag.token}}:{{dag.version}} #{{dag.id}}</h2>

    <p>
        <a href="#dag/update/id/{{dag.id}}" class="btn btn-default">edit</a>
        <button class="btn btn-primary" ng-controller="CreateDagRunCtrl" ng-click="createDagRunById(dag.id)">
            run
        </button>
    </p>

    <div>
        <p>id: {{dag.id}}</p>
        <p>version: {{dag.version}}</p>
        <p>token: {{dag.token}}</p>
        <p>tasks: {{dag.tasks.length}}</p>

        <table class="table table-stripped">
            <thead>
            <tr>
                <th>id</th>
                <th>version</th>
                <th>token</th>
                <th>depends</th>
                <th>retry</th>
                <th>operation</th>
                <th>config</th>
                <th>environment</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="task in dag.tasks">
                <td>{{task.id}}</td>
                <td>{{task.version}}</td>
                <td>{{task.token}}</td>
                <td>
                    <span ng-repeat="token in task.depends">
                        {{token}}
                    </span>
                </td>
                <td>{{task.retry}}</td>
                <td>{{task.operation}}</td>
                <td>
                    <span ng-repeat="(key,value) in task.command.config">
                        {{key}}:{{value}}
                    </span>
                </td>
                <td>
                    <span ng-repeat="(key,value) in task.command.environment">
                        {{key}}:{{value}}
                    </span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div dag-visualize></div>
</script>
<script type="text/ng-template" id="/dag-create.html">
    <h2 class="page-header">Create DAG</h2>

    <form name="dagForm" ng-submit="dagForm.$valid && createDag()" class="form-horizontal">
        <div class="form-group" ng-class="{'has-error':errors.token}">
            <label class="control-label col-sm-2">Token</label>
            <div class="col-sm-10">
                <input ng-model="dag.token" name="token" class="form-control" placeholder="token">
                <span class="help-block" ng-show="errors.token">{{errors.token}}</span>
            </div>
        </div>

        <div class="form-group" ng-class="{'has-error':errors.tasks_list}">
            <div class="col-sm-offset-2 col-sm-10">
                <span class="help-block" ng-show="errors.tasks_list">{{errors.tasks_list}}</span>
            </div>
        </div>

        <ng-include src="'/dag-tasks-form.html'"></ng-include>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button ng-click="addTask()" type="button" class="btn btn-default">Add task</button>
                <button ng-click="validateDag()" type="button" class="btn btn-default">Validate</button>
                <button type="submit" class="btn btn-primary" ng-disabled="dagForm.$invalid">Submit</button>
            </div>
        </div>
    </form>
</script>
<script type="text/ng-template" id="/dag-update.html">
    <h2 class="page-header">Update DAG {{dag.token}}:{{dag.version}}</h2>

    <form name="create-dag" ng-submit="updateDag()" class="form-horizontal">
        <div class="form-group" ng-class="{'has-error':errors.tasks_list}">
            <span class="help-block" ng-show="errors.tasks_list">{{errors.tasks_list}}</span>
        </div>

        <ng-include src="'/dag-tasks-form.html'"></ng-include>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button ng-click="addTask()" type="button" class="btn btn-default">Add task</button>
                <button ng-click="validateDag()" type="button" class="btn btn-default">Validate</button>
                <button type="submit" class="btn btn-primary" ng-disabled="dagForm.$invalid">Submit</button>
            </div>
        </div>
    </form>
</script>
<script type="text/ng-template" id="/dag-tasks-form.html">
    <div class="panel panel-default" ng-repeat="task in dag.tasks" ng-form="taskForm">
        <div class="panel-body">
            <div class="form-group" ng-class="{'has-error':errors.tasks[$index].token}">
                <label class="control-label col-sm-2">Token</label>
                <div class="col-sm-10">
                    <input ng-model="task.token" name="token" required class="form-control" placeholder="token">
                    <span class="help-block" ng-show="errors.tasks[$index].token">{{errors.tasks[$index].token}}</span>
                </div>
            </div>
            <div class="form-group" ng-class="{'has-error':errors.tasks[$index].depends}">
                <label class="control-label col-sm-2">Depends</label>
                <div class="col-sm-10">
                    <div ng-model="task.depends" json-text ui-ace="{onLoad:aceJson}" class="ace_short"></div>
                    <span class="help-block" ng-show="errors.tasks[$index].depends">{{errors.tasks[$index].depends}}</span>
                </div>
            </div>
            <div class="form-group" ng-class="{'has-error':errors.tasks[$index].retry}">
                <label class="control-label col-sm-2">Retry</label>
                <div class="col-sm-10">
                    <input ng-model="task.retry" name="retry" type="number" required class="form-control" placeholder="0">
                    <span class="help-block" ng-show="errors.tasks[$index].token">{{errors.tasks[$index].retry}}</span>
                </div>
            </div>
            <div class="form-group" ng-class="{'has-error':errors.tasks[$index].operation}">
                <label class="control-label col-sm-2">Operation</label>
                <div class="col-sm-10">
                    <select ng-model="task.operation" name="operation" required class="form-control" ng-options="item for item in operations"></select>
                    <span class="help-block" ng-show="errors.tasks[$index].operation">{{errors.tasks[$index].operation}}</span>
                </div>
            </div>
            <div ng-repeat="schema in operationsMap[task.operation].schema" ng-switch on="schema.type">
                <div class="form-group" ng-switch-when="select">
                    <label class="control-label col-sm-2">{{schema.label}}</label>
                    <div class="col-sm-10">
                        <select ng-model="task.command.config[schema.field]" class="form-control" ng-options="item for item in schema.options"></select>
                    </div>
                </div>
                <div class="form-group" ng-switch-when="text">
                    <label class="control-label col-sm-2">{{schema.label}}</label>
                    <div class="col-sm-10">
                        <input ng-model="task.command.config[schema.field]" class="form-control">
                    </div>
                </div>
                <div class="form-group" ng-switch-when="json">
                    <label class="control-label col-sm-2">{{schema.label}}</label>
                    <div class="col-sm-10">
                        <div ng-model="task.command.config[schema.field]" json-text ui-ace="{onLoad:aceJson}"></div>
                    </div>
                </div>
                <div class="form-group" ng-switch-when="json-array">
                    <label class="control-label col-sm-2">{{schema.label}}</label>
                    <div class="col-sm-10">
                        <div ng-model="task.command.config[schema.field]" json-text ui-ace="{onLoad:aceJson}" class="ace_short"></div>
                    </div>
                </div>
                <div class="form-group" ng-switch-when="shell">
                    <label class="control-label col-sm-2">{{schema.label}}</label>
                    <div class="col-sm-10">
                        <div ng-model="task.command.config[schema.field]" ui-ace="{onLoad:aceShell}"></div>
                    </div>
                </div>
                <div class="form-group" ng-switch-when="boolean">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label> <input type="checkbox" ng-model="task.command.config[schema.field]">
                                {{schema.label}} </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group" ng-class="{'has-error':errors.tasks[$index].command.environment}">
                <label class="control-label col-sm-2">Operation Environment</label>
                <div class="col-sm-10">
                    <div ng-model="task.command.environment" json-text ui-ace="{onLoad:aceJson}"></div>
                    <span class="help-block" ng-show="errors.tasks[$index].command.environment">{{errors.tasks[$index].command.environment}}</span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button ng-click="removeTask($index)" type="button" class="btn btn-danger">Remove task</button>
                </div>
            </div>
        </div>
    </div>
</script>

<script type="text/ng-template" id="/dag-run.html">
    <h2 class="page-header">DAG run</h2>

    <table class="table table-stripped">
        <thead>
        <tr>
            <th>id</th>
            <th>dag</th>
            <th>created</th>
            <th>start</th>
            <th>finish</th>
            <th>status</th>
            <th>tasks</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="run in runs">
            <td>{{run.id}}</td>
            <td>{{run.dag.token}}:{{run.dag.version}}</td>
            <td>{{run.createdDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            <td>{{run.startDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            <td>{{run.finishDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            <td>{{run.status}}</td>
            <td>{{run.tasks.length}}</td>
            <td>
                <a href="#dag/run/id/{{run.id}}" class="btn btn-xs btn-default">view</a>
            </td>
        </tr>
        </tbody>
    </table>
</script>
<script type="text/ng-template" id="/dag-run-pending.html">
    <h2 class="page-header">DAG run pending</h2>

    <table class="table table-stripped">
        <thead>
        <tr>
            <th>id</th>
            <th>dag</th>
            <th>created</th>
            <th>start</th>
            <th>finish</th>
            <th>status</th>
            <th>tasks</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="run in runs">
            <td>{{run.id}}</td>
            <td>{{run.dag.token}}:{{run.dag.version}}</td>
            <td>{{run.createdDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            <td>{{run.startDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            <td>{{run.finishDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            <td>{{run.status}}</td>
            <td>{{run.tasks.length}}</td>
            <td>
                <a href="#dag/run/id/{{run.id}}" class="btn btn-xs btn-default">view</a>
            </td>
        </tr>
        </tbody>
    </table>
</script>
<script type="text/ng-template" id="/dag-run-state.html">
    <h2 class="page-header">DAG {{dag_run.dag.token}}:{{dag_run.dag.version}} run:{{dag_run.id}}</h2>

    <p ng-show="cancelable">
        <button ng-click="cancelDagRun()" type="button" class="btn btn-danger">Cancel</button>
    </p>

    <p>created: {{dag_run.createdDate | date:'yyyy-MM-dd HH:mm:ss'}}</p>

    <p>start: {{dag_run.startDate | date:'yyyy-MM-dd HH:mm:ss'}}</p>

    <p>finish: {{dag_run.finishDate | date:'yyyy-MM-dd HH:mm:ss'}}</p>

    <p>status: {{dag_run.status}}</p>

    <p>tasks:{{dag_run.tasks.length}}</p>

    <div diagram-gantt></div>

    <div class="panel panel-default" ng-repeat="run in dag_run.tasks">
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-2">
                    <span class="panel-title inline">{{run.task.token}}</span>
                </div>
                <div class="col-sm-9">
                    <span class="label label-info">run:{{run.status}}</span>
                    <span class="label label-info" ng-show="run.operationResult.status">op:{{run.operationResult.status}}</span>
                    <span class="label label-default">created:{{run.createdDate | date:'yyyy-MM-dd HH:mm:ss'}}</span>
                    <span class="label label-default" ng-show="run.startDate">start:{{run.startDate | date:'yyyy-MM-dd HH:mm:ss'}}</span>
                    <span class="label label-default" ng-show="run.finishDate">finish:{{run.finishDate | date:'yyyy-MM-dd HH:mm:ss'}}</span>
                </div>
                <div class="col-sm-1">
                    <button type="button" class="console-caret" aria-label="Caret" ng-show="run.operationResult.output" ng-click="toggleOutput(run)">
                        <span class="caret"></span>
                    </button>
                </div>

            </div>
            <pre class="console" ng-show="isVisible[run.id]">{{run.operationResult.output}}</pre>
        </div>
    </div>
</script>

<script type="text/ng-template" id="/dag-schedule.html">
    <h2 class="page-header">DAG schedule</h2>

    <table class="table table-stripped">
        <thead>
        <tr>
            <th>dag</th>
            <th>enabled</th>
            <th>cron expression</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="schedule in schedules">
            <td>
                <a href="#dag/token/{{schedule.token}}" class="btn btn-sm btn-default">{{schedule.token}}</a>
            </td>
            <td>
                {{schedule.enabled}}
            </td>
            <td>
                <div>
                    <div ng-show="!schedule.edit" ng-click="edit(schedule)" class="input-sm expression">
                        {{schedule.cronExpression}}&nbsp;</div>
                    <form class="form-horizontal" ng-show="schedule.edit" ng-submit="update(schedule)">
                        <div class="form-group" ng-class="{'has-error':schedule.errors.cronExpression}">
                            <div class="input-group">
                                <input ng-model="schedule.cronExpression" required class="form-control input-sm" placeholder="* * * * *">
                                <span class="input-group-btn">
                                    <button class="btn btn-sm btn-default" type="submit">
                                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                    </button>
                                </span>
                            </div>
                            <span class="help-block" ng-show="schedule.errors.cronExpression">{{schedule.errors.cronExpression}}</span>
                        </div>
                    </form>
                </div>
            </td>
            <td>
                <a href="#dag/token/{{schedule.token}}" class="btn btn-sm btn-default">view</a>
                <button class="btn btn-sm btn-default" ng-show="!schedule.enabled" ng-click="enableSchedule(schedule)">
                    enable
                </button>
                <button class="btn btn-sm btn-default" ng-show="schedule.enabled" ng-click="disableSchedule(schedule)">
                    disable
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</script>

<script type="text/ng-template" id="/operations.html">
    <h2 class="page-header">Operations</h2>

    <div ng-repeat="operation in operations">
        <h3>{{operation.id}}</h3>

        <label>Config reference:</label>
        <pre>{{operation.reference|json}}</pre>
    </div>
</script>

<script src="/resources/webjars/jquery/1.11.1/jquery.min.js"></script>
<script src="/resources/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
<script src="/resources/webjars/d3js/4.2.1/d3.min.js"></script>
<script src="/resources/webjars/angularjs/1.6.1/angular.min.js"></script>
<script src="/resources/webjars/angularjs/1.6.1/angular-route.min.js"></script>
<script src="/resources/webjars/angular-websocket/2.0.0/dist/angular-websocket.min.js"></script>

<script src="/resources/webjars/ace/1.1.7-1/src-min-noconflict/ace.js"></script>
<script src="/resources/webjars/angular-ui-ace/0.2.3/ui-ace.min.js"></script>

<script src="/static/dashboard.js"></script>
</body>
</html>
